<template>
  <div>
    <v-centerForm>
      <template slot='left'>
        <el-form inline :model="searchObject" ref="searchObject" label-width="80px">
          <el-form-item label="异常名称"
                        prop="name">
            <el-input placeholder="请输入异常名称" v-model="searchObject.name"></el-input>
          </el-form-item>
          <el-form-item label="操作员"
                        prop="userName">
            <el-input placeholder="请输入操作员姓名" v-model="searchObject.userName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            <el-button size="mini" icon="el-icon-refresh-left" @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot='right'>
        <el-upload :action="importUrl"
                   :show-file-list="false"
                   :on-success="handleImportFile" style="display: inline-block">
          <el-button size="mini" type="primary" icon="el-icon-top" style="margin-left: 10px">导入
          </el-button>
        </el-upload>
        <el-button size="mini" type="warning" icon="el-icon-bottom" style="margin-left: 10px" @click="handleExportFile">
          导出
        </el-button>
        <el-button size="mini" icon="el-icon-delete" type="danger" @click="removeBatchDialog"
                   :disabled="tableSelectData.length === 0">批量删除
        </el-button>
      </template>
    </v-centerForm>
    <x-table :loading="loadingBtn.tableLoading" :columnData="columnData" :tableData="tableData"
             :tableSize="pagination.size" :tableTotal="pagination.total" @currentPage="getCurrent" @pageSize="getSize"
             @selectionChange="selectionChange">
      <el-table-column slot="selection" :selectable="row=>!row.init" type="selection" align="center">
      </el-table-column>
      <el-table-column show-overflow-tooltip @click="copyText(scope.row.requestParam)" slot="requestParam"
                       label="请求参数"
                       align="center">
        <template slot-scope="scope">
          <div @click="copyText(scope.row.requestParam)">{{ scope.row.requestParam }}</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip @click="copyText(scope.row.method)" slot="method"
                       label="请求方法"
                       align="center">
        <template slot-scope="scope">
          <div @click="copyText(scope.row.method)">{{ scope.row.method }}</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip @click="copyText(scope.row.name)" slot="name"
                       label="异常名称"
                       align="center">
        <template slot-scope="scope">
          <div @click="copyText(scope.row.name)">{{ scope.row.name }}</div>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip @click="copyText(scope.row.message)" slot="message"
                       label="异常信息"
                       align="center">
        <template slot-scope="scope">
          <div @click="copyText(scope.row.message)">{{ scope.row.message }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" slot="operate" label="操作选项" width="200">
        <template slot-scope="scope" v-if="!scope.row.init">
          <el-tooltip class="item" effect="dark" content="新增" placement="top">
            <i class="el-icon-circle-plus-outline table-icon-btn color-primary"
               @click="addOrSeeOrEdit('新增','add', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="查看" placement="top">
            <i class="el-icon-view table-icon-btn color-success" @click="addOrSeeOrEdit('查看','see', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="top">
            <i class="el-icon-edit-outline table-icon-btn color-primary"
               @click="addOrSeeOrEdit('编辑','edit', scope.row)"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <i class="el-icon-delete table-icon-btn color-error" @click="removeDialog(scope.row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </x-table>
    <el-dialog :title="dialog.title" :visible.sync="dialogVisible" @closed="closeDialog">
      <el-form :disabled="dialog.flag === 'see'" :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="请求参数" prop="requestParam">
          <el-input v-model="form.requestParam" placeholder="请输入请求参数"></el-input>
        </el-form-item>
        <el-form-item label="请求方法" prop="method">
          <el-input v-model="form.method" placeholder="请输入请求方法"></el-input>
        </el-form-item>
        <el-form-item label="异常名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入异常名称"></el-input>
        </el-form-item>
        <el-form-item label="异常信息" prop="message">
          <el-input v-model="form.message" placeholder="请输入异常信息"></el-input>
        </el-form-item>
        <el-form-item label="请求用户ID" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入请求用户ID"></el-input>
        </el-form-item>
        <el-form-item label="请求用户名称" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入请求用户名称"></el-input>
        </el-form-item>
        <el-form-item label="请求IP" prop="ip">
          <el-input v-model="form.ip" placeholder="请输入请求IP"></el-input>
        </el-form-item>
        <el-form-item label="请求URI" prop="uri">
          <el-input v-model="form.uri" placeholder="请输入请求URI"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="createTime">
          <el-input v-model="form.createTime" placeholder="请输入创建时间" disabled></el-input>
        </el-form-item>
        <el-form-item label="更新时间" prop="updateTime">
          <el-input v-model="form.updateTime" placeholder="请输入更新时间" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import exceptionLogApi from '@/api/system/exceptionLogApi'
import { axiosBaseUrl } from '@/common/config/baseConfig'
import xTable from '@/components/xTable/x-table.vue'

export default {
  name: 'exceptionLogList',
  components: { xTable },
  data () {
    return {
      importUrl: axiosBaseUrl + '/api/v1/log/exceptionLog/importFile',
      exportUrl: axiosBaseUrl + '/api/v1/log/exceptionLog/exportFile',
      loadingBtn: {
        tableLoading: false
      },
      searchObject: {
        name: '',
        userName: ''
      },
      dataArr: [
        {
          id: 'LOGIN',
          label: '登录'
        },
        {
          id: 'LOGOUT',
          label: '注销'
        },
        {
          id: 'SELECT',
          label: '查询'
        },
        {
          id: 'INSERT',
          label: '新增'
        },
        {
          id: 'UPDATE',
          label: '更新'
        },
        {
          id: 'DELETE',
          label: '删除'
        },
        {
          id: 'UPLOAD',
          label: '上传'
        },
        {
          id: 'DOWNLOAD',
          label: '下载'
        },
        {
          id: 'IMPORT',
          label: '导入'
        },
        {
          id: 'EXPORT',
          label: '导出'
        },
      ],
      tableData: [],
      tableSelectData: [],
      columnData: [
        {
          slot: 'selection'
        },
        {
          type: 'index',
          label: '序号'
        },
        {
          label: '请求参数',
          slot: 'requestParam'
        },
        {
          label: '请求方法',
          slot: 'method'
        },
        {
          label: '异常名称',
          slot: 'name'
        },
        {
          label: '异常信息',
          slot: 'message'
        },
        {
          label: '请求用户ID',
          prop: 'userId'
        },
        {
          label: '请求用户名称',
          prop: 'userName'
        },
        {
          label: '请求IP',
          prop: 'ip'
        },
        {
          label: '请求URI',
          prop: 'uri'
        },
        {
          label: '创建时间',
          prop: 'createTime'
        },
        {
          label: '更新时间',
          prop: 'updateTime'
        },
        {
          slot: 'operate',
          label: '操作选项'
        }
      ],
      rules: {
        requestParam: [
          {
            required: true,
            message: '请求参数不能为空',
            trigger: 'blur'
          }
        ],
        method: [
          {
            required: true,
            message: '请求方法不能为空',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '异常名称不能为空',
            trigger: 'blur'
          }
        ],
        message: [
          {
            required: true,
            message: '异常信息不能为空',
            trigger: 'blur'
          }
        ],
        userId: [
          {
            required: true,
            message: '请求用户ID不能为空',
            trigger: 'blur'
          }
        ],
        userName: [
          {
            required: true,
            message: '请求用户名称不能为空',
            trigger: 'blur'
          }
        ],
        ip: [
          {
            required: true,
            message: '请求IP不能为空',
            trigger: 'blur'
          }
        ],
        uri: [
          {
            required: true,
            message: '请求URI不能为空',
            trigger: 'blur'
          }
        ],
      },
      pagination: {
        current: 1,
        size: 10,
        total: 0
      },
      dialog: {
        title: '',
        flag: ''
      },
      dialogVisible: false,
      form: {},
      formLabelWidth: '100px'
    }
  },
  created () {
    this.selectPage()
  },
  methods: {
    copyText (text) {
      this.$copyText(text).then(() => {
        this.$notify.success('内容已复制到剪贴板！！！')
      })
    },
    search () {
      this.selectPage()
    },
    resetSearch () {
      this.searchObject = {}
      this.selectPage()
    },
    getCurrent (value) {
      this.pagination.current = value
      this.selectPage()
    },
    getSize (value) {
      this.pagination.size = value
      this.selectPage()
    },
    async addOrSeeOrEdit (title, flag, row) {
      this.dialog.title = title
      this.dialog.flag = flag
      this.dialogVisible = true
      if (flag === 'see' || flag === 'edit') {
        const { data: res } = await exceptionLogApi.selectOneOfExceptionLog(row.id)
        this.form = res
      } else {
        this.$nextTick(() => {
          this.$refs.form.clearValidate()
        })
      }
    },
    removeDialog (row) {
      this.$confirm('是否确认删除？', '确认删除').then(_ => {
        this.remove(row)
      }).catch(_ => {
      })
    },
    async remove (row) {
      const {
        code,
        msg
      } = await exceptionLogApi.deleteOfExceptionLog(row.id)
      if (code === this.$constant.SUCCESS) {
        this.$message.success(msg)
        await this.selectPage()
      } else {
        this.$message.error(msg)
      }
    },
    selectionChange (value) {
      this.tableSelectData = value
    },
    removeBatchDialog () {
      this.$confirm('是否确认批量删除？', '确认批量删除').then(_ => {
        this.removeBatch()
      }).catch(_ => {
      })
    },
    async removeBatch () {
      const idList = this.tableSelectData.map(item => item.id)
      const {
        code,
        msg
      } = await exceptionLogApi.deleteBatchOfExceptionLog(idList)
      if (code === this.$constant.SUCCESS) {
        await this.selectPage()
        this.$message.success(msg)
      } else {
        this.$message.error(msg)
      }
    },
    async handleImportFile ({
      code,
      msg
    }) {
      if (code === this.$constant.SUCCESS) {
        this.$message.success(msg)
        await this.selectPage()
      } else {
        this.$message.error(msg)
      }
    },
    async handleExportFile () {
      const confirm = await this.$confirm('是否确认导出？', '确认导出')
      if (confirm) {
        window.open(this.exportUrl)
      }
    },
    async selectPage () {
      this.loadingBtn.tableLoading = true
      const {
        code,
        msg,
        data
      } = await exceptionLogApi.selectPageOfExceptionLog(this.pagination.current, this.pagination.size, this.searchObject)
      if (code === this.$constant.SUCCESS) {
        this.tableData = data.records
        this.pagination.total = data.total
        this.loadingBtn.tableLoading = false
      } else {
        this.$message.error(msg)
      }
    },
    closeDialog () {
      this.form = {}
      this.dialog.flag = ''
      this.dialog.title = ''
    },
    async submitForm () {
      if (this.dialog.flag === 'see') {
        this.dialogVisible = false
        return
      }
      await this.$refs.form.validate(async (valid) => {
        if (valid) {
          const params = this.form
          if (this.dialog.flag === 'edit') {
            const {
              code,
              msg
            } = await exceptionLogApi.updateOfExceptionLog(params)
            if (code === this.$constant.SUCCESS) {
              await this.selectPage()
              this.$message.success(msg)
              this.dialogVisible = false
            } else {
              this.$message.error(msg)
            }
          } else {
            const {
              code,
              msg
            } = await exceptionLogApi.insertOfExceptionLog(params)
            if (code === this.$constant.SUCCESS) {
              await this.selectPage()
              this.$message.success(msg)
              this.dialogVisible = false
            } else {
              this.$message.error(msg)
            }
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
